<template>
  <div id="hitchOrderDetail">
    <amap></amap>
    <div class="top_bar">
      <div class="topbar">
        <p class="topbarleft">
          <md-icon slot="left" class="back_btn" name="snyc_nav_fh" @click="goHitchhikeHome"></md-icon>
        </p>
        <p>{{title}}</p>
        <p class="exchangetext" @click="callPolice">一键报警</p>
      </div>
      <!--订单头部信息-->
      <div class="orderTop" v-show="IsOrderTop">
        <p>
          <span class="gonggao_box">
            <md-icon name="gonggao_icon" slot="left" class="gonggao_icon"></md-icon>
          </span>
          <span class="gonggao_text" v-html="tripTipText"></span>
          <span class="guanbi_box" @click="closeTop">
            <md-icon name="guanbi" slot="left" class="guanbi"></md-icon>
          </span>
        </p>
      </div>
    </div>
    <hitch-order-bottom
      :carStatus="carStatus"
      :tripList="tripList"
      ref="hitchOrderBottom"
      @hitchDingweiBtn="hitchDingweiBtn"
      @hitchOrderEvaluteDetail="hitchOrderEvaluteDetail"
      @hideTrip="hideTrip"
    ></hitch-order-bottom>
  </div>
</template>
<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import '@/assets/svgs/gonggao_icon.svg';
import '@/assets/svgs/guanbi.svg';
import '@/assets/svgs/share_icon.svg';
import MapTool from '@/components/map/MapTool';
import HitchOrderBottom from './components/HitchOrderBottom';
import { GET_CURRENT_LOCATION } from '@/store/actions.types';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { Dialog, Icon, Popup, Toast } from 'mand-mobile';
import QRCode from 'qrcodejs2';
import TopBar from '@/components/TopBar';
import weixinUtils from '@/common/weixinUtils';
import Utils from '@/common/pakjUtils';
import XBack from 'xback';
import http from '@/common/http';
import Loading from '@/components/loading';
import { mapGetters, mapActions, mapMutations } from 'vuex';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'hitch-order-detail',
  components: {
    [MapTool.name]: MapTool,
    [HitchOrderBottom.name]: HitchOrderBottom,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Popup.name]: Popup,
    [Toast.name]: Toast
  },
  data() {
    return {
      title: '订单详情',
      IsOrderTop: '',
      tripTipText: '',
      carStatus: '', // 行程状态 0 待接单 1 待接驾 2 到达乘客上车点 3 行程中 4 完成 5 订单取消 6订单中断 7 接驾中
      tripList: false
    };
  },
  created() {
    // 查询订单信息
    this.getHitchOrderDetail();
  },
  methods: {
    ...mapActions(['getHitchOrderDetailInfo']),
    // 返回首页
    goHitchhikeHome() {
      this.$router.replace({
        name: 'hitchhikeMyAllot'
      });
    },
    //一键报警
    callPolice() {
      this.$router.push({
        name: 'hitchhikeSafe'
      });
    },
    closeTop() {
      this.IsOrderTop = false;
    },
    // 获取定位
    hitchDingweiBtn() {
      console.log('获取当前位置');
    },
    // 隐藏起点和终点信息
    hideTrip() {
      this.tripList = !this.tripList;
    },
    // 评价成功后重新获取订单信息
    hitchOrderEvaluteDetail() {
      this.getHitchOrderDetail();
    },
    // 查询订单信息
    getHitchOrderDetail() {
      if (this.$route.query.orderno) {
        this.getHitchOrderDetailInfo(this.$route.query.orderno).then(() => {
          Loading.hide();
          let momstart = moment(this.getHitchOrderDetailData.orderEarliestTime, 'x');
          let travelTimeStr = momstart.calendar(null, {
            sameDay: '[今天] HH:mm',
            nextDay: '[明天] HH:mm',
            nextWeek: 'dddd HH:mm',
            lastDay: '[昨天] HH:mm',
            lastWeek: '[上] ddd HH:mm',
            sameElse: 'MMMDo HH:mm'
          });
          // 订单状态
          if (this.getHitchOrderDetailData.orderStatusId === '1') {
            this.title = '待接驾';
            document.title = '待接驾';
            this.carStatus = '1';
            this.IsOrderTop = true;
            this.tripList = true;
            if (this.getHitchOrderDetailData.orderType === '1') {
              // 订单类型 "1、拼车 0、独享"
              this.tripTipText =
                "同行订单已生成，请提前做好出行准备并于<em style='color:#FF6917;font-style:normal'>" +
                travelTimeStr +
                '</em>前到达约定上车点';
            } else {
              this.tripTipText =
                "订单已生成，请提前做好出行准备并于<em style='color:#FF6917;font-style:normal'>" +
                travelTimeStr +
                '</em>前到达约定上车点';
            }
          } else if (this.getHitchOrderDetailData.orderStatusId === '2') {
            // 司机已到达乘客上车点
            this.title = '接驾中';
            document.title = '接驾中';
            this.carStatus = '2';
            this.IsOrderTop = true;
            this.tripList = true;
            this.tripTipText =
              "车主已到达上车点等待，请于<em style='color:#FF6917;font-style:normal'>" +
              travelTimeStr +
              '</em>前到达约定上车点，若您迟到车主可能会取消订单，影响您的出行';
          } else if (this.getHitchOrderDetailData.orderStatusId === '7') {
            // 司机未到乘客上车点
            this.title = '接驾中';
            document.title = '接驾中';
            this.carStatus = '7';
            this.IsOrderTop = true;
            this.tripList = true;
            if (this.getHitchOrderDetailData.orderType === '1') {
              if (this.getHitchOrderDetailData.goToType === '2') {
                // 接送拼友 2
                this.tripTipText =
                  "车主正在接送拼友，请遵守接送顺序，请于<em style='color:#FF6917;font-style:normal'>" +
                  travelTimeStr +
                  '</em>前到达约定上车点';
              } else {
                // 接自己 1
                this.tripTipText =
                  "车主正在接您的路上，请于<em style='color:#FF6917;font-style:normal'>" +
                  travelTimeStr +
                  '</em>前到达约定上车点';
              }
            } else {
              this.tripTipText =
                "车主正在接您的路上，请于<em style='color:#FF6917;font-style:normal'>" +
                travelTimeStr +
                '</em>前到达约定上车点';
            }
          } else if (this.getHitchOrderDetailData.orderStatusId === '3') {
            this.title = '行程中';
            document.title = '行程中';
            this.tripTipText = '行程已开始，请系好安全带，祝您旅途愉快！';
            this.carStatus = '3';
            this.tripList = true;
            this.IsOrderTop = true;
          } else if (this.getHitchOrderDetailData.orderStatusId === '4') {
            this.title = '已完成';
            document.title = '已完成';
            this.tripTipText = '行程已完成，期待您下次再使用！';
            this.carStatus = '4';
            this.IsOrderTop = true;
            this.tripList = false;
          } else if (this.getHitchOrderDetailData.orderStatusId === '5') {
            this.title = '已取消';
            document.title = '已取消';
            this.IsOrderTop = false;
            this.carStatus = '5';
            this.tripList = false;
          } else if (this.getHitchOrderDetailData.orderStatusId === '6') {
            this.title = '行程中断';
            document.title = '行程中断';
            this.IsOrderTop = false;
            this.carStatus = '6';
            this.tripList = false;
          }
          this.$refs.hitchOrderBottom.hitchOrderInit();
        });
      } else {
        Dialog.alert({
          title: '提示',
          content: '获取不到订单号',
          confirmText: '确定'
        });
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['getHitchOrderDetailData'])
  }
};
</script>
<style lang="stylus" scoped>
#hitchOrderDetail {
  p, h6 {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .top_bar {
    position: absolute;
    top: 0px;
    z-index: 1000;
    width: 100%;
  }

  .orderTop {
    background-color: #F8F8F8;
    width: 100%;
    box-shadow: 0px 4px 6px 0px rgba(191, 191, 191, 0.5);
    opacity: 0.8;
    padding: 10px 0px;
  }

  .orderTop p {
    display: flex;
    align-items: center;
    margin: 0px 30px;
    font-size: 24px;
    color: #666;
    padding-top: 10px;
  }

  .back_btn {
    width: 22px;
    height: 38px;
  }

  .gonggao_box {
    display: inline-block;
    text-align: center;
    float: left;
    margin-right: 18px;
  }

  .gonggaoboxative {
    margin-top: 12px;
  }

  .gonggao_icon {
    width: 32px;
    height: 32px;
  }

  .gonggao_text {
    width: 602px;
    display: inline-block;
    float: left;
  }

  .gonggao_text em {
    color: #FF6917;
    font-style: normal;
  }

  .guanbi_box {
    display: inline-block;
    text-align: center;
    float: left;
    margin-left: 18px;
  }

  .guanbiboxative {
    margin-top: 15px;
  }

  .guanbi {
    width: 20px;
    height: 20px;
  }

  .topbar {
    height: 88px;
    background-color: #fff;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
  }

  .topbar p {
    padding-top: 20px;
  }

  .topbarleft {
    width: 80px;
  }

  .exchangetext {
    color: #666;
    font-size: 28px;
  }

  .back_btn {
    width: 22px;
    height: 38px;
  }
}
</style>
